<template>
    <main class="page-bg" id="canvasDom">
        <header class="header-box">
            <n-page-header>
                <template #header>
                    <n-breadcrumb>
                        <n-breadcrumb-item>数据可视化</n-breadcrumb-item>
                        <n-breadcrumb-item>多维分析</n-breadcrumb-item>
                    </n-breadcrumb>
                </template>
            </n-page-header>
        </header>

        <header class="header-title flex-between">
            <span>多维分析</span>
            <section>
                <ScreenshotKit :downloadName="'数据可视化-多维分析'" />
            </section>
        </header>

        <section class="search-box">
            <n-grid x-gap="12" :cols="3" style="height: 80px;">
                <n-gi class="flex-center">
                    <n-flex justfiy="flex-start" :wrap="false" style="width: 100%;">
                        <span class="search-lable">部门名称</span>
                        <n-select v-model:value="value" :options="options" clearable placeholder="请选择" />
                    </n-flex>
                </n-gi>
                <n-gi class="flex-center">
                    <n-flex justfiy="flex-start" :wrap="false">
                        <span class="search-lable">创建时间</span>
                        <n-date-picker v-model:value="range" type="daterange" clearable />
                    </n-flex>
                </n-gi>
                <n-gi class="flex-end mr20">
                    <n-button class="mr20">重置</n-button>
                    <n-button type="info">查询</n-button>
                </n-gi>
            </n-grid>
        </section>

        <section class="statistic-box">
            <header class="statistic-title flex-between">
                <span>核心指标</span>
                <section class="statistic-time">
                    <n-date-picker v-model:value="dateCode" type="date" />
                </section>
            </header>
            <n-grid x-gap="12" :cols="5">
                <n-gi>
                    <p class="statistic-title">今日UV</p>
                    <p class="statistic-num">68</p>
                    <p class="statistic-text">同比上周<span>8.04%</span><CaretUp class="up-icon" /></p>
                </n-gi>
                <n-gi>
                    <p class="statistic-title">昨日UV</p>
                    <p class="statistic-num">3200</p>
                    <p class="statistic-text">同比上周<span>24.04%</span><CaretUp class="up-icon" /></p>
                </n-gi>
                <n-gi>
                    <p class="statistic-title">新用户</p>
                    <p class="statistic-num">3200</p>
                    <p class="statistic-text text-dowm">同比上周<span>23.25%</span><CaretDown class="down-icon" /></p>
                </n-gi>
                <n-gi>
                    <p class="statistic-title">近7日UV</p>
                    <p class="statistic-num">360</p>
                </n-gi>
                <n-gi>
                    <p class="statistic-title">近30日UV</p>
                    <p class="statistic-num">2890</p>
                </n-gi>
            </n-grid>
        </section>

        <n-grid cols="3" x-gap="12" item-responsive responsive="screen">
            <n-grid-item span="0 m:1 l:2">
                <section class="chart-two chart-mr">
                    <header class="chart-title flex-between">
                        <span>大盘趋势</span>
                        <n-select v-model:value="trendDate" :options="trendOptions" clearable placeholder="请选择" style="width: 120px;" />
                    </header>
                    <MoreLines v-if="canShow" :canvasHeight="215" :data="mlineData" />
                </section>
            </n-grid-item>
            <n-grid-item>
                <section class="chart-two chart-ml">
                    <header class="chart-title flex-between">
                        <span>产品好评度排行</span>
                        <n-select v-model:value="trendDate" :options="trendOptions" clearable placeholder="请选择" style="width: 120px;" />
                    </header>
                    <section class="progress-box">
                        <n-flex justify="flex-start" v-for="(item, i) in progressList" :key="i" class="progress-row">
                            <div class="progress-title flex-start">
                                <span :class="i>2 ? 'grey-index': 'black-index'">{{ i+1 }}</span> 
                                <n-ellipsis style="width: 110px; margin: 0 5px;">{{item.name}}</n-ellipsis>
                            </div>
                            <div class="progress-main">
                                <n-progress type="line" :percentage="item.num" :color="item.color" 
                                :stroke-width="5"
                                :show-indicator="true"
                                :border-radius="0"
                                :fill-border-radius="0"
                                :indicator-text-color="'#c0c7cd'" />
                            </div>
                        </n-flex>
                    </section>
                </section>
            </n-grid-item>
        </n-grid>

        <n-grid cols="3" x-gap="12" item-responsive responsive="screen">
            <n-grid-item>
                <section class="chart-two chart-mr">
                    <header class="chart-title flex-between">
                        <span>用户来源</span>
                        <EllipsisHorizontal class="ellipsis-icon"/>
                    </header>
                    <ThreeBar v-if="canShow" :canvasHeight="225" :data="threeBarData" />
                </section>
            </n-grid-item>
            <n-grid-item>
                <section class="chart-two chart-mrl">
                    <header class="chart-title flex-between">
                        <span>产品使用设备分布</span>
                        <EllipsisHorizontal class="ellipsis-icon"/>
                    </header>
                    <LoopPie v-if="canShow" :canvasHeight="225" :data="loopPieData" />
                </section>
            </n-grid-item>
            <n-grid-item>
                <section class="chart-two chart-ml">
                    <header class="chart-title flex-between">
                        <span>用户职业画像</span>
                        <EllipsisHorizontal class="ellipsis-icon"/>
                    </header>
                    <Radar v-if="canShow" :canvasHeight="225" :data="radarData"/>
                </section>
            </n-grid-item>
        </n-grid>

        <section class="chart-tabs">
            <n-card content-style="padding: 0;">
                <n-tabs
                type="line"
                size="large"
                :tabs-padding="20"
                :bordered="false" 
                pane-style="padding: 0px; border: 0;"
                >
                    <n-tab-pane v-for="i in 3" :name="'产品'+i">
                        <section>
                            <n-grid :x-gap="2" :y-gap="2" :cols="4" layout-shift-disabled>
                                <n-gi>
                                    <section class="chart-footer">
                                        <header class="chart-title flex-between">
                                            <span>整体流量评分</span>
                                            <section class="statistic-time">
                                                <n-date-picker v-model:value="dateCode" type="date" />
                                            </section>
                                        </header>
                                        <section class="sort-box">
                                            <n-flex vertical :warp="true">
                                                <p>86.2<em>分</em></p>
                                                <p>排名<span>前20%</span></p>
                                                <n-progress type="line" :percentage="percentage" :show-indicator="false"
                                                :border-radius="0"
                                                :fill-border-radius="0" />
                                            </n-flex>
                                        </section>
                                        <section class="score-box">
                                            <p class="flex-between"><span>平均分</span><span>77.5</span></p>
                                            <p class="flex-between"><span>最高分</span><span>95.5</span></p>
                                            <p class="flex-between"><span>最低分</span><span>54.5</span></p>
                                        </section>
                                    </section>
                                </n-gi>
                                <n-gi :span="2">
                                    <section class="chart-footer">
                                        <header class="chart-title flex-between">
                                            <span>整体流量趋势</span>
                                            <n-flex justify="flex-end">
                                                <section class="statistic-time-range">
                                                    <n-date-picker v-model:value="range" type="monthrange" clearable />
                                                </section>
                                                <EllipsisHorizontal class="ellipsis-icon" />
                                            </n-flex>
                                        </header>
                                        <LineArea v-if="canShow" :canvasHeight="265" :data="areaData" />
                                    </section>
                                </n-gi>
                                <n-gi>
                                    <section class="chart-footer">
                                        <header class="chart-title flex-start">
                                            <span>专家分析</span>
                                        </header>
                                        <section class="anal-box">
                                            <header class="flex-start"><DocumentTextOutline class="alay-icon" />总体情况</header>
                                            <p>根据金融学理论，企业需懂得提前规避风险以减少损失。</p>
                                            <p>根据金融学理论，企业需懂得提前规避风险以减少损失。</p>
                                        </section>
                                        <section class="anal-box">
                                            <header class="flex-start"><BulbOutline class="alay-icon" />值得关注</header>
                                            <p>根据金融学理论，企业需懂得提前规避风险以减少损失。</p>
                                            <p>根据金融学理论，企业需懂得提前规避风险以减少损失。</p>
                                        </section>
                                    </section>
                                    
                                </n-gi>
                            </n-grid>
                        </section>
                    </n-tab-pane>
                </n-tabs>
            </n-card>
        </section>
        
        

        <section style="height: 100px;" class="flex-center">查看全部<ChevronForward class="alay-icon" /></section>
    </main>
    
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { CaretUp,CaretDown,EllipsisHorizontal,DocumentTextOutline, BulbOutline, ChevronForward} from '@vicons/ionicons5'
import MoreLines from '@/components/charts3/MoreLines.vue'
import ThreeBar from '@/components/charts3/ThreeBar.vue'
import LoopPie from '@/components/charts3/LoopPie.vue'
import Radar from '@/components/charts3/Radar.vue'
import LineArea from '@/components/charts3/LineArea.vue'
import ScreenshotKit from '@/components/common/ScreenshotKit.vue';
type progressObject = {
    name: String,
    color: String,
    num: Number
}
const range = ref<[number, number]>([1183135260000, Date.now()])
const value = ref("1")
const dateCode = ref(1183135260000)
const trendDate = ref("6")
const percentage = ref(80)

const canShow = ref(false)
const max = 500
const min = 1
let options = reactive(<Array<object>>[])
let trendOptions = reactive(<Array<object>>[])

let mlineData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<object>>[]
})
let areaData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<number>>[],
    contrastDataList: <Array<number>>[],
})
let threeBarData = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<object>>[]
})
let radarData = reactive({
    radarDataList: <Array<object>>[],
    seriesDataList: <Array<object>>[]
})
let loopPieData = reactive({
    seriesDataList: <Array<object>>[]
})
let progressList = reactive(<Array<object>>[])
const init = () => {
    options = [
        {label: "体验技术部", value: "1"},
        {label: "金融销售部", value: "2"},
        {label: "资金交易部", value: "3"},
        {label: "技术研发部", value: "4"},
        {label: "财务管理部", value: "5"},
    ]
    trendOptions = [
        {label: "近三个月", value: "3"},
        {label: "近六个月", value: "6"},
        {label: "近一年", value: "12"},
    ]
    let list = [], list2 = [], list3 = []
    for (let index = 0; index < 12; index++) {
        let num = Math.floor(Math.random() * (max - min + 1)) + min;
        list.push(num)
        list2.push(num*2)
        list3.push(num*3)
    }

    let mlist = ['2023-7-1','2023-8-1','2023-9-1','2023-10-1','2023-11-1','2023-12-1'
    ,'2024-1-1','2024-2-1','2024-3-1','2024-4-1','2024-5-1','2024-6-1']
    mlineData.xAxisDataList.push(...mlist)
    mlineData.seriesDataList = [
        { name: '产品一', data: list },
        { name: '产品二', data: list2 },
        { name: '产品三', data: list3 }
    ]

    let arr=[], arr2=[], arr3=[]
    for (let index = 0; index < 5; index++) {
        let num = Math.floor(Math.random() * (max - min + 1)) + min;
        arr.push(num)
        arr2.push(num*1.5)
        arr3.push(num*2)
    }
    threeBarData.xAxisDataList = ["付费用户", "免费用户", "自主"]
    threeBarData.seriesDataList = [
        { name: '产品一', data: arr },
        { name: '产品二', data: arr2 },
        { name: '产品三', data: arr3 }
    ]
    loopPieData.seriesDataList = [
        {name: "科研机构", value: 500},
        {name: "新闻动态", value: 400},
        {name: "智库", value: 100},
        {name: "科技文献", value: 400}
    ]
    for (let index = 0; index < 6; index++) {
        progressList.push({
            name: 'And Design Pro'+index,
            num: (Math.floor(Math.random() * (100 - 1 + 1)) + 1).toFixed(2),
            color: "#74a1fa"
        })
    }

    radarData.radarDataList = [
        { name: '工商', max: 6500 },
        { name: '网球', max: 16000, axisLabel:{show: false} },
        { name: '篮球教教', max: 30000, axisLabel:{show: false} },
        { name: '田径', max: 38000, axisLabel:{show: false} },
        { name: '体育教练', max: 52000, axisLabel:{show: false} },
        { name: '足球', max: 25000, axisLabel:{show: false} },
        { name: '健美操', max: 26000, axisLabel:{show: false} }
    ]
    radarData.seriesDataList = [
        {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: '当前部门',
            areaStyle: {},
        },
        {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: '集团大盘',
            areaStyle: {},
        }
    ]
    areaData.xAxisDataList = ['2023-10-1','2023-11-1','2023-12-1'
    ,'2024-1-1','2024-2-1','2024-3-1','2024-4-1']
    areaData.seriesDataList = [820, 932, 901, 934, 1290]
    areaData.contrastDataList = [820, 932, 901, 934, 1290, 1330, 1320]
    canShow.value = true
}
init()
</script>

<style scoped>
.page-bg {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f5;
}
.header-box {
    height: 30px;
    line-height: 30px;
    margin: 0 20px;
    padding: 20px 0;
    /* background-color: aquamarine; */
}
.header-title {
    line-height: 30px;
    margin: 0 20px;
    padding: 20px 0;
}
.header-title span {
    font-size: 24px;
    font-weight: 600;
    color: #000000;
}
.search-box {
    height: 80px;
    background-color: #ffffff;
    border-radius: 10px;
    margin: 0 20px;
}
.search-lable {
    min-width: 100px;
    text-align: center;
}
.mr20 {
    margin-right: 20px;
}
.statistic-box {
    background-color: #ffffff;
    border-radius: 10px;
    margin: 10px 20px;
    padding: 10px 20px;
}
.statistic-box span {
    color: #000000;
    font-size: 14px;
    font-weight: 600;
}
.statistic-time {
    width: 160px;
}
.statistic-time-range {
    width: 240px;
}
.statistic-title {
    width: 100%;
    font-size: 14px;
    color: #000000;
}
.statistic-num {
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    color: #000000;
}
.statistic-text {
    width: 100%;
    font-size: 12px;
    color: #000000;
}
.statistic-text span {
    color: #ff0000;
    padding-left: 4px;
}
.text-dowm span {
    color: #7ce1b8;
    padding-left: 4px;
}
.up-icon {
    width: 10px;
    height: 16px;
    color: #ff0000;
    vertical-align: bottom;
}
.down-icon {
    width: 10px;
    height: 16px;
    color: #7ce1b8;
    vertical-align: bottom;
}
.chart-two {
    height: 300px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px 20px;
}
.chart-footer {
    height: 350px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px 20px;
    border-right: 1px solid #efeff5;
    border-radius: 0;
}
.chart-tabs {
    height: 400px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px 10px;
    margin: 10px 10px 10px 20px;
}
.chart-mr {
    margin: 10px 0 10px 20px;
}
.chart-ml {
    margin: 10px 10px 10px 0;
}
.chart-mrl {
    margin: 10px 0;
}
.chart-title {
    margin-bottom: 15px;
}
.chart-title span {
    color: #000000;
    font-size: 14px;
    font-weight: 600;
}
.ellipsis-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.progress-box {
    padding: 0 10px;
    margin: 15px 0;
}
.progress-row {
    margin: 15px 0;
}
.progress-title {
    max-width: 25%;
    height: 24px;
    line-height: 24px;
    color: #2d4458;
    font-size: 12px;
    text-align: left;
    padding-left: 4px;
}
.grey-index {
    border-radius: 50%;
    color: #ffffff;
    font-size: 10px;
    background-color: #e8e8e8;
    padding: 0px 7px;
}
.black-index {
    border-radius: 50%;
    color: #ffffff;
    font-size: 10px;
    background-color: #2d4458;
    padding: 0px 7px;
}
.progress-main {
    width: 70%;
    height: 24px;
    line-height: 24px;
}
.sort-box p:first-child {
    font-size: 32px;
    font-weight: 600;
    color: #353535;
}
.sort-box p:first-child em {
    font-size: 30px;
    color: #353535;
}
.sort-box p:last-child {
    font-size: 14px;
    color: #868686;
}
.sort-box p:last-child span {
    font-size: 14px;
    color: #353535;
}
.score-box {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #efeff5;
}
.score-box p {
    margin: 10px 0;
    font-size: 16px;
    color: #353535;
}
.anal-box {
    margin: 20px 0;
}
.anal-box header {
    color: #353535;
    font-size: 16px;
    font-weight: 600;
}
.anal-box p {
    padding-left: 20px;
    line-height: 24px;
}
.alay-icon {
    width: 15px;
    height: 20px;
    color: #353535;
    margin-right: 5px;
}
.light-green {
  height: 80px;
  background-color: rgba(0, 128, 0, 0.12);
}
.green {
  height: 80px;
  background-color: rgba(0, 128, 0, 0.24);
}
</style>
